<template>
	<Modal v-model="showCrop" :mask-closable="false">
		<Spin fix v-show="spinShow"></Spin>
        <p slot="header" style="color:rgb(8, 93, 196);text-align:center">
            <span>图片裁剪</span>
        </p>
        <div class="cropper-wrapper">
	        	<div class="cropper-content">
				<vueCropper class="cropper"
				  ref="cropper"
				  :img=cropOption.img
				  fixed
				  :outputSize=cropOption.size
				  autoCrop
				  :autoCropWidth="autoCropWidth"
				  :autoCropHeight="autoCropHeight"
		        	  :outputType = cropOption.outputType
				></vueCropper>
			</div>	
        </div>
        <div slot="footer">
            <Button size="large" @click="showCrop=false">取消</Button>
            <Button type="primary" size="large" @click="cofirmCrop">确认</Button>
        </div>
    </Modal>
</template>

<script>
	import vueCropper from 'vue-cropper'
	import { uploadImage } from 'api/uploadImage'
	export default {
		 props: {
		    showCrop: {
	        		type: Boolean,
	        		default: false
		    },
		    /*
		     * @cropOption 裁剪配置
		     */
		    cropOption: {
		    		type: Object,
		    		default () {
	       			return {
				      	img: '',
				        outputType: 'jpeg || png ',
		        			size: 1
			    		}
       			}
		    },
		    /*
		     * @cropOption 裁剪宽度
		     */
		    autoCropWidth: {
		    		type: Number,
		    		default: 200
		    },
		    /*
		     * @cropOption 裁剪高度
		     */
		    autoCropHeight: {
		    		type: Number,
		    		default: 200
		    }
		  },
        data () {
            return {
            		spinShow: false,
            	}
        },
        methods: {
        		cofirmCrop () {
        			var that = this;
        			this.spinShow = true;
        			this.$refs.cropper.getCropBlob((data) => {
        				uploadImage(data).then(imgUrl => {
					  	this.showCrop = false;
	  	        			this.spinShow = false;
	  	        			this.$emit("cropSuccess",imgUrl);
        				}).catch(err => {
	  	        			this.spinShow = false;
//       				this.$Message.error('上传图片失败');	
	  	        			this.$emit("cropError")
        				})
				})
        		},
        		
        },
        created() {
        },
        components: {
        		vueCropper
		}
     }
</script>

<style scoped>
.cropper-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	
}
.cropper-content {
	width: 200px;
	height: 200px;
}
</style>